<template>
  <div id="handNote">
    <div id="hand">
      <div class="navbar">
        <van-nav-bar title="手记精选">
          <template #right>
            <van-icon name="comment-o" size="20" color="#000" />
          </template>
        </van-nav-bar>
      </div>
      <div class="hand-content">
        <ul class="hand-list">
          <li v-for="(item, i) in noteData" :key="i" @click="toDetail(item.id)">
            <a href="javascript:;">
              <div class="hand-top">
                <div class="hand-top-left">
                  <img v-lazy="item.user.avatar" alt="" />
                  <div>
                    <span>{{ item.user.username }}</span>
                    <span>{{ releaseTime }}</span>
                  </div>
                </div>
                <div class="hand-top-right">
                  <van-icon name="plus" size="12" color="#f50" />
                  <span>关注</span>
                  <van-icon name="ellipsis" size="12"></van-icon>
                </div>
              </div>
              <div class="hand-center">
                <h5>{{ item.title }}</h5>
                <p>{{ item.content }}</p>
                <div class="img-box">
                  
                  <img
                    alt=""
                    v-for="(item, jj) in newimgBox[i]"
                    :key="jj"
                    v-lazy="item"
                    @click=readFile(item) 
                  />
                </div>
              </div>
              <div class="hand-bottom">
                <div class="hand-bottom-left">
                  <van-icon name="like-o" size="16" color="#000" />
                  <span>{{ item.count.count_liked }}</span>
                  <van-icon name="comment-o" size="16" color="#000" />
                  <span>{{ item.count.count_commented }}</span>
                  <van-icon name="share-o" size="16" color="#000" />
                  <span>{{ item.count.count_shared }}</span>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import VueAxios from "vue-axios";
export default {
  data() {
    return {
      releaseTime: "",
      noteData: [],
      imgBox: [],
      imgNum: 0,
      newimgBox: [],
      page: 1,
      isLoading: false,
    };
  },
  methods: {
    getHandler(page) {
      axios({
        url: "https://apis.netstart.cn/xpc/notes",
        method: "get",
        params: {
          page,
        },
      }).then((res) => {
        this.isLoading = false;
        res.data.data.list.forEach((ele) => {
          this.noteData.push(ele);
        });
        this.noteData.forEach((item) => {
          this.imgBox.push(item.images);
        });
        this.imgBox.forEach((item, i) => {
          if (item != null) {
            if (item.length > 3) {
              this.newimgBox.push(item.slice(0, 3));
            } else {
              this.newimgBox.push(item);
            }
          } else {
            this.newimgBox.push(item);
          }
        });
      });
    },
    toDetail(id) {
      this.$router.push({
        path: "/notedetail",
        query: {
          id: id,
        },
      });
    },
    scroll() {
      let div = document.querySelector("#handNote");
      let div2 = document.querySelector("#hand");
      div.onscroll = () => {
        // 距离底部200px时加载一次
        let bottomOfWindow =
          div2.offsetHeight - div.scrollTop - window.innerHeight <= 200;
        if (bottomOfWindow && this.isLoading == false) {
          this.page++;
          this.isLoading = true;

          this.getHandler(this.page);
        }
      };
    },
    
    getList() {
      listFileinfo(this.queryParams).then((res) => {
        this.upload.fileList = res.rows;
      });
    },
  },
  created() {
    this.getHandler();
    this.releaseTime = new Date().toLocaleString().slice(5, 10);
    this.page = 0;
  },
  mounted() {
    this.scroll();
  },
};
</script>
<style lang="scss" >
#handNote {
  height: 100vh;
  overflow-y: auto;
}
.navbar {
  .van-nav-bar {
    height: 12.2657vw;
    .van-nav-bar__content {
      height: 12.2657vw;
      .van-nav-bar__title {
        height: 12vw;
        line-height: 12vw;
        font-weight: bold;
      }
    }
    .van-nav-bar__title {
      font-size: 32px;
    }
    .van-nav-bar__right {
      right: 10px;
    }
  }
}
.hand-content {
  margin-top: 20px;
  padding-bottom: 60px;
  .hand-list {
    span {
      margin-top: 10px;
    }
    li {
      background: #fff;
      padding: 0 4.1063vw;
      margin-bottom: 15px;
      a {
        .hand-top {
          display: flex;
          justify-content: space-between;
          .hand-top-left {
            display: flex;
            align-items: center;
            img {
              width: 10.6667vw;
              height: 10.6667vw;
              border-radius: 50%;
            }
            div {
              margin-left: 2.6667vw;
              span {
                display: block;
                font-size: 24px;
                color: #333333;
                &:nth-child(2) {
                  font-size: 20px;
                  color: #999999;
                }
              }
            }
          }
          .hand-top-right {
            display: flex;
            align-items: center;
            span {
              display: block;
              font-size: 24px;
              color: #f50;
              margin-right: 2.6667vw;
              margin-left: 5px;
            }
          }
        }
        .hand-center {
          margin-top: 10px;
          p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            /*从上到下垂直排列子元素*/
            -webkit-line-clamp: 3;
            /*行数，超出三行隐藏且多余的用省略号表示...*/
            line-clamp: 5;
            overflow: hidden;
            margin-top: 10px;
          }
          .img-box {
            padding: 3.6232vw 0;
            display: flex;
            justify-content: space-between;
            overflow: hidden;
            width: 100%;
            img {
              width: 29.7101vw;
              height: 29.7101vw;
              border-radius: 5px;
            }
          }
        }
        .hand-bottom {
          display: flex;
          justify-content: space-between;
          padding-bottom: 60px;
          .hand-bottom-left {
            display: flex;
            justify-content: center;
            width: 92.029vw;
            text-align: center;
            margin-bottom: 20px;
            align-items: center;
            i {
              left: 9.667vw;
            }
            span {
              display: block;
              font-size: 24px;
              color: #999999;
              margin-left: 1.6667vw;
              width: 30.6667vw;
            }
          }
        }
      }
    }
  }
}
</style>